<template>
  <div class="pageBox" ref="pageBox">
    <head-component :back="false" title="首页" rightText="右上角" rightUrl="/login"></head-component>
    <div class="flex-between" style="width: 100%;">
      <p>1111</p>
      <span>afasegfes</span>
    </div>
    <button @click="$router.push('/login')">走你</button>
    <button @click="onCopy('不走')">不走</button>
    <button @click="onSaveImg">保存DOM图片</button>
      <button @click="goRotate">goRotate</button>
    <count-down :time="time"></count-down>
    <div id="echartsBox" ref="echartsBox"></div>
    <foot-component :tab="0"></foot-component>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, onMounted, ref } from "vue";
import { copyToClip } from "../../untils/common";
import { saveDomImage } from "../../untils/saveImg";
import countDown from "../../components/countDown";
import * as echarts from "echarts";
import footComponent from "../../components/footComponent";
import headComponent from "../../components/headComponent";
import router from "../../router";

export default defineComponent({
  components: {
    "count-down": countDown,
    "foot-component": footComponent,
    "head-component": headComponent,
  },
  setup() {
    const time = ref(0);
    const pageBox = ref(null);
    // 饼图容器
    const echartsBox = ref(null);
    const chart = ref(null);
    // 饼图数据
    const option = ref(null);

    function getEcharts() {
      chart.value = echarts.init(echartsBox.value);

      option.value = {
        color: ["#fff000", "#000fff", "#ff00ff", "#fabcde", "#abcdef"],
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option.value && chart.value.setOption(option.value);
    }

    function getTime() {
      let nowTime = new Date().getTime();
      time.value = nowTime - 1638347434441;
    }
    getTime();

    function onCopy(text) {
      copyToClip(text);
    }

    function onSaveImg() {
      saveDomImage(pageBox.value);
    }

    function goRotate() {
      router.push("/rotate");
    }

    onMounted(() => {
      getEcharts();
    });

    return {
      time,
      pageBox,
      echartsBox,
      option,
      chart,
      onCopy,
      onSaveImg,
      getTime,
      getEcharts,
      goRotate,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  font-size: 36px;
  padding: 40px 0 50px 0;
  #echartsBox {
    width: 100%;
    height: 500px;
  }
}
</style>
